<template>
	<el-card style="margin: 15px; min-height: calc(100vh - 80px)">
		<!--    头部数据-->
		<div>
			<el-row :gutter="20" class="topInfo">
				<el-col :span="6">
					<div id="stuNumDiv" class="el-colDiv">
						<div id="ssv1-main-text" class="nowDiv">实时</div>
						<span class="title">用户统计</span><br />
						<span class="digital">{{ this.userNum }}</span><br />
						<span class="last-span">当前分类总记录数</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div id="haveRoomDiv" class="el-colDiv">
						<div id="ssv2-main-text" class="nowDiv">实时</div>
						<span class="title">美食统计</span><br />
						<span class="digital">{{ this.foodNum }}</span><br />
						<span class="last-span">当前分类总记录数</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div id="repairNum" class="el-colDiv">
						<div id="ssv3-main-text" class="nowDiv">实时</div>
						<span class="title">留言统计</span><br />
						<span class="digital">{{ this.onlineNum }}</span><br />
						<span class="last-span">当前分类总记录数</span>
					</div>
				</el-col>
				<el-col :span="6">
					<weather />
				</el-col>
			</el-row>

			<el-row>
				<!-- <el-col :span="2"/> -->

				<el-col :span="14">
					
					<div style="margin-top: 50px;">
						<h1>美食网管理说明：</h1>
						<div style="margin-top: 30px;">
							<li>美食管理模块：</li>
							<p style="margin: 13px;">{{"\xa0\xa0\xa0\xa0\xa0\xa0"}}美食管理模块,可以对网站上的美食进行管理，具有网站上美食基本的的增删改查功能，主页轮播图默认为前5个美食，主页热门推荐默认为前12个美食。</p>
						</div>
						<div style="margin-top: 30px;">
							<li>用户管理模块：</li>
							<p style="margin: 13px;">{{"\xa0\xa0\xa0\xa0\xa0\xa0"}}用户管理模块,可以对网站上的用户进行管理，具有网站上用户的增删改查功能，分管理员和普通用户，用户名不得修改。</p>
						</div>
						<div style="margin-top: 30px;">
							<li>留言管理模块：</li>
							<p style="margin: 13px;">{{"\xa0\xa0\xa0\xa0\xa0\xa0"}}留言管理模块，仅支持查看用户的网站留言。</p>
							
						</div>
					
					</div>
				</el-col>
				<el-col :span="10">
					<el-card style="margin-top: 50px;">
						<Calender />
					</el-card>
				</el-col>
			</el-row>
		</div>
	</el-card>
</template>

<script>
</script>

<script src="@/assets/js/Main.js"></script>
<style scoped>
	@import '../assets/css/Home.css';
</style>
